<template>
	<view>
		<image class="bg" :src="apifun.serveimg+'loginbg.png'" mode=""></image>
		<view style="position:relative;z-index: 10;">
			<view class="toptitle">
				<view class="toptitle-title marginAuto">e陪驾&爱学车</view>
				<view class="toptitle-txt marginAuto flex">
					<view class="toptitleb mainBg baiColor">教练端</view>
					<view>欢迎您的登录</view>
				</view>
			</view>
			<view class="mian-main marginAuto">
				<view class="item marginAuto">
					<view class="item-main marginAuto">
						<view class="item-title">+86</view>
						<input type="text" name="phone" v-model="phone" maxlength="11" placeholder="请输入手机号">
					</view>
				</view>
				<view class="item marginAuto" style="margin-top:40rpx;">
					<view class="item-main marginAuto">
						<input type="text" name="veri" style="width:62%;" v-model="veri" placeholder="请输入验证码">
						<view class="each-code pull-right">
							<text class="each-code-y" v-if="!istime" @click="vericlick()">获取验证码</text>
							<text class="each-code-j" v-if="istime">{{times}}s</text>
						</view>
					</view>
				</view>
			</view>
			<view class="marginAuto" style="width:600rpx;margin-top:100rpx;">
				<uv-button text="确认登录" @click="enter()" :customStyle="{
					'background':'#0E71EB',
					'color':'#ffffff',
					'font-size':'30rpx',
					'width':'600rpx',
					'height':'100rpx',
					'border-radius':'20rpx'
				}"></uv-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				istime: false,
				times:60,
				phone: '',
				veri: ''
			}
		},
		onLoad() {
			
		},
		methods: {
			enter() {
				let that = this;
				if (that.phone == '' || that.veri == '') {
					that.apifun.toast("请将信息输入完整");
					return false
				};
				if (that.apifun.testphone.test(that.phone) == false || that.phone == '') {
					that.apifun.toast("手机格式有误");
					return false
				};
				let sendData = {
					mobile:this.phone,
					sms_code:this.veri
				};
				this.apifun.unirequest('/coach/user/login','post',sendData,(res)=>{
					if(res.code === 200){
						let datas = res.data;
						uni.setStorageSync('token',datas.token);
						setTimeout(()=>{
							uni.reLaunch({
								url: '/pages/tabbar/order'
							});
						},300)
					}else{
						that.apifun.toast(res.msg)
					}
				},false,true)
			},
			vericlick() {
				let that = this;
				let flag = true;
				if (that.apifun.testphone.test(that.phone) == false || that.phone == '') {
					that.apifun.toast("手机格式有误");
					return false
				};
				if (flag) {
					flag = false;
					let index = 60;
					that.istime = true;
					let time = setInterval(function() {
						if (index > 0) {
							--index;
							that.times = index;
						} else {
							index = 60;
							clearInterval(time)
							that.istime = false;
							flag = true;
						}
					}, 1000);
				}
				let sendData = {
					mobile: that.phone,
					type: '4'
				}
				that.apifun.unirequest(that.apifun.login_send_code, 'post', sendData, (res) => {
					if (res.code === 200) {
						let data = res.data;
						that.apifun.toast('发送成功；请注意查收');
					} else {
						that.apifun.toast(res.msg)
					}
				},true,true)
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.bg {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1;
		width: 100vw;
		height: 100vh;
	}

	.toptitle {
		margin-top: 220rpx;
	}

	.toptitle-title {
		width: 85%;
		font-size: 72rpx;
		color: #2A2A2A
	}

	.toptitle-txt {
		width: 85%;
		font-size: 36rpx;
		color: #2A2A2A;
	}
	.toptitleb{
		display: inline-block;
		padding:0 20rpx;
		font-size: 28rpx;
		line-height:50rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
	/* input */
	.mian-main {
		width: 100%;
		margin-top: 190rpx;
	}

	.item {
		padding: 10rpx 0;
		
	}

	.item-main {
		width: 550rpx;
		display: flex;
		height: 80rpx;
		line-height: 80rpx;
		border-bottom: 1px solid #EBEBEB;
	}

	.item .item-title {
		display: inline-block;
		width: 100rpx;
		margin-right: 20rpx;
		font-size: 30rpx;
		color: #333333;
		text-align: center;
	}

	.item .item-title::after {
		display: inline-block;
		content: "";
		width: 1px;
		height: 20rpx;
		margin-left: 12rpx;
		border-left: 1px solid #D8D8D8;
	}

	.item input {
		margin-left: 10rpx;
		width: 65%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		color: #333333;
	}

	.passwordtext {
		line-height: 80rpx;
		margin-top: 80rpx;
	}

	.passwordtext-button {
		color: #8D8D97;
		font-size: 24rpx;
	}

	.each-code {
		height: 64rpx;
		line-height: 56rpx;
		width: 200rpx;
		margin-top: 6rpx;
		text-align: center;
	}

	.each-code::before {
		display: inline-block;
		content: "";
		width: 1px;
		height: 20rpx;
		margin-right: 12rpx;
		border-left: 1px solid #D8D8D8;
	}

	.each-code text {
		color: #333333;
		font-size: 26rpx;
		margin: 0;
	}

	/*  */
	.enter {
		width: 550rpx;
		height: 88rpx;
		line-height: 88rpx;
		margin: 100rpx auto 0;
		border-radius: 100rpx;
	}
</style>